<template>
	<!--我关注的房源-->
	<!--https://youzan.github.io/vant/#/zh-CN/intro-->
	<div class="coupon" id="app">
		<!--头部-->
		<myheader></myheader>
		<!--没有数据-->
		<div class="noinfo" v-if="showlogge">
			<div class="noinfoimg">
				<img src="../../../../static/wfy/slime_01.png" />
			</div>
			<h3 class="showtop">没有关注房源</h3>
		</div>
		<!--有数据-->
		<!--有数据-->
		<ul class="houseinfo" v-else-if="!showlogge">
			<li v-for="item in data">
				<router-link :to="{path:'/lideta/mydetails',query:{id:item.house_id}}">
					<div><img v-bind:src="'http://106.13.72.24:81/house/public/static/uploads/'+item.img1" ></div>
					<div class="housebox">
						<p class="title">{{item.house_name}}</p>
						<div class="details">
							<p class="fonts"><span>{{item.house_type}}</span><span>{{item.house_size}}m²  </span><span>{{item.house_direction}}</span></p>
							<p class="pic">{{item.house_wintype}}</p>
						</div>
						<div class="pricebox">
							<p class="price">{{item.house_des}}</p>
							<p class="p1">{{item.house_price}}元/月</p>
						</div>
					</div>
				</router-link>
			</li>
			
		</ul>
	</div>
	
</template>
<script>
	import myheader from '@/components/public/myheader'
	export default {
		name: 'coupon',
		data() {
			return {
				showlogge: false,
				isShow: false,
				data:''
			}
		},
		mounted:function() {
			//判读是否登陆了
			if(localStorage.getItem("nameid")==null||localStorage.getItem("nameid")==undefined||localStorage.getItem("nameid")==""){
				this.$router.push({
					name:'login'
				});
			}
			else{
				var _this=this;
				_this.axios.get(_this.ajaxUrl + '/api/mylist/housefind').then(function(res){
					_this.data=res.data.data;
				
					if(_this.data.length>0){
						_this.showlogge=false;
					}
					else{
						_this.showlogge=true;
					}
				}).catch(function(err) {});
				
			}
		},
		components: {
			myheader
		},
		methods: {
			showToggle: function() {
				this.isShow = !this.isShow
				if (this.isShow) {
					this.btnText = "隐藏"
				} else {
					this.btnText = "显示"
				}
			}
		}
	}
</script>

<style scoped="scoped">
.noinfo {
		width: 100%;
		border-top: 1px solid #ECECEC;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.noinfoimg{
		margin-top: 3.1rem;
	}
	
	
	.showtop {
		width: 100%;
		text-align: center;
		margin-top: 0.4rem;
		color: #6c6b6b;
		font-size: 0.35rem;
		
	}
	
	.noinfo img {
		width: 2rem;
		height: 2.3rem;
	}
	
	.houseinfo {
		list-style: none;
		padding: 0 0.35rem;
	}
	
	.houseinfo li:first-of-type{
		border-top: 1px solid #ececec;
	}
	
	.houseinfo li {
		border-bottom: 1px solid #ececec;
		padding: 0.35rem 0;
		box-sizing: border-box;
	}
	
	.houseinfo li>a {
		width: 100%;
		height: 100%;
		display: block;
		padding-left: 0.35rem;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}
	
	.houseinfo li>a img {
		width: 2.09rem;
		height: 1.65rem;
	}
	
	.houseinfo .housebox {
		padding: 0 0.3rem;
		box-sizing: border-box;
	}
	
	.title {
		width: 4.5rem;
		display: inline-block;
		font-size: 0.35rem;
		color: #000000;
		line-height: 0.4rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.details,
	.pricebox {
		display: flex;
		justify-content: space-between;
		padding-right: 0.3rem;
	}
	
	.details .fonts {
		color: #333;
		font-size: 0.3rem;
		line-height: 0.5rem;
	}
	
	.details .pic {
		color: #fa5741;
		font-size: 0.3rem;
		font-weight: 700;
		line-height: 0.5rem;
	}
	
	.pricebox {
		color: #9399a5;
		line-height: 0.5rem;
		font-size: 0.25rem;
	}
	.p1{
		color: red;
		font-size: 0.3rem;
	}
</style>